<template>
	<view>
		<view class="box11">
			<view class="topBox">
				<view class="top">
					<view class="go-back iconfont" @click="goback">
						&#xe602;
					</view>
					<view class="middle" v-text="product.productName">
						<!--秀实—东雀嘉熠一号收益好转-->
					</view>
					
					 <view class="share iconfont">
						<!--收藏--><!-- &#xe634; -->
					</view> 
				</view>
				<view class="second-title">
					<!--契约型私募基金--> 
					
				</view>
				<view class="videoBox" v-if="videoUrl!=null&&videoUrl!=''">
					<video :src="videoUrl" controls class="video" poster="http://t.cn/EcTfXOv"></video>
				</view>
			</view>

		</view>
		<view class="contentBox">
			<view class="product-item">
				<view class="product-title">
					<view class="title uni-font17" v-text="product.productName">
						<!--秀实——东雀嘉熠一号收益权转让计划-->
					</view>

				</view>
				<view class="product-detail">
					<view class="item">
						<view class="large-size color item-top" >
							{{yield}}
						</view>
						<view class="item-bottom">
							业绩比较基准
						</view>
					</view>
					<view class="item">
						<view class="size item-top">
							产品期限
						</view>
						<view class="item-bottom" v-text="product.deadline">
							<!--12个月-->
						</view>
					</view>
					<view class="item">
						<view class="size item-top">
							认购起点
						</view>
						<view class="item-bottom" v-text="product.perminBalance">
							<!--50万元-->
						</view>

					</view>

				</view>
				<view class="button-group">
					<view class="" @click="toProductDetail">
						产品详情
					</view>
					<view class="" @click="toBenAnPage" v-show="isSiMu==1">
						产品备案查询
					</view>
					
				</view>
			</view>


			<view class="contentMid">
				<view class="videoDetail uni-font17">
					<view class="">
						相关评论
					</view>
					<view class="right">
						<view class="iconfont">
							&#xe63e;
						</view>
						<view class="" v-text="viewCount">
							<!--2345-->
						</view>
					</view>
				</view>
				<view class="label">
					<view :key="tag.index" class="label-item" v-for="tag in productTagList" >{{tag.tagNm}}</view>
				</view>
			</view>
			<view class="contentBot">
				<view  class="mark" v-for="(item,cindex) in productPingLunList" :key="item.index">
					<view class="avator-left">
						<image src="../../../static/image/invest/u762.png" v-if="item.iconUrl==null||item.iconUrl==''" />
						<image :src="item.iconUrl" v-else />
					</view>
					<view class="mark-right">
						<view class="mark-top">
							<view class="mark-top-left">
								<view class="position">{{item.userName}}</view>
								<view class="name"></view>
							</view>
							<view class="star">
								<view class="star-item" v-for="(scoreItem,sIndex) in item.prodScore" :key="scoreItem.sIndex">
									<image class="star-image-select" src="http://h5ip.cn/1sER" />
								</view>
								<view class="star-item" v-for="(scoreItem,sIndex2) in 5-item.prodScore" :key="scoreItem.sIndex2">
									<image class="star-image-select" src="http://t.cn/EVP7XM5" />
								</view>
							</view>
						</view>
						<view class="time">
							{{item.daysBefore}}
							<!--9小时前-->
						</view>
						<!--<view class="mark-bot twoLines">-->
						<view class="mark-bot">
							<!--评论内容-->{{item.answDtl}}
						</view>
						<view class="mark-images">
							<!--产品回复图片-->
						<image class="mark-image" :key="imgItem.iIndex" v-for="(imgItem,iIndex) in item.pingLunDtlList" :src="imgItem.acceUrl"/>
						</view>
					</view>
				</view>
				<!--
				<view class="mark">
					<view class="avator-left">
						<image src="../../../static/image/invest/u762.png" />
					</view>
					<view class="mark-right">
						<view class="mark-top">
							<view class="mark-top-left">
								<view class="position">理财师</view>
								<view class="name">李明</view>
							</view>
							<view class="star">
								<view class="star-item">
									<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
								</view>
								<view class="star-item">
									<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
								</view>
								<view class="star-item">
									<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
								</view>
								<view class="star-item">
									<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
								</view>
								<view class="star-item">
									<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
								</view>

							</view>

						</view>
						<view class="time">9小时前</view>
						<view class="mark-bot twoLines">
							秀实东区寄秀实东区寄秀实东区寄秀实东区寄秀实东区寄秀实东区寄秀实东区寄
						</view>
					</view>
				</view>
-->
			</view>
			<view  @click="getMoreList" class="more-mark" v-if="showMoreDiv"><label class="iconfont">&#xe65e;</label>查看更多评论</view>
				
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		<view class="bottom">
			<view class="bottom-tab">
				<view class="bottom-item" @click="toWodelicaishi">
					<view class="bottom-icon">
						<image class="bottom-icon-image" src="http://t.cn/EcTfA2w" />
					</view>
					<view class="bottom-text">我要预约</view>
				</view>
			<!-- 	<view class="bottom-item">
					<view class="bottom-icon">
						<image class="bottom-icon-image" src="http://t.cn/EcTfqNU" />

					</view>
					 <view class="bottom-text">收藏</view> 
				</view> -->
				<view class="bottom-item" @click="toPinglun">
					<view class="bottom-icon">
						<image class="bottom-icon-image" src="http://t.cn/EcTffNp" />

					</view>
					<view class="bottom-text">写评论</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self, page = 1;
	//引入全局变量
	import global_ from '../../../components/tool/productGlobal'
	import uniLoadMore from '../../../components/uni-load-more-pinglun'
	export default {
		components: {
			uniLoadMore,
			global_
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			page=1;
			_self = this;
			var productParam=uni.getStorageSync('productBaseInfo');
			this.projId=productParam.pkId;
			this.yield=productParam.yield;
			this.product=productParam;
			this.getData();
		},
		data() {
			return {
				isRenzheng: false ,//是否进行实名认证 
				isSiMu:0  ,//是否是私募产品 0：私募产品，1：非私募产品
				url:global_.api.PRODUCT_PAGE_PAI,
				loadMoreUrl:global_.api.PRODUCT_PINGLUN_LOADMORE_PAI,
				showMoreDiv:false,
				projId:'',
				yield:'',//业绩比较基准（上一页面传递过来)
				token:uni.getStorageSync('token_key'),
				loginRole:uni.getStorageSync('loginRole'),
				resultData:'',
				product:'',
				videoUrl:'',
				productBeiAnUrl:'',
				productTagList:[],
				viewCount:'',
				loadingType: 0,
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				productPingLunList:[]
				
			};
		},
		methods: {
			goback() {
				uni.navigateBack();
				/* uni.switchTab({
					url: '../../../pages/product/product',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
			},
			getData(){
				uni.showNavigationBarLoading();
				uni.request({
					method: 'GET',
					url: this.url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						token: this.token,
						projId: this.projId
					},
				
					dataType: 'json',
					success: (res) => {
						this.resultData = res.data;
						this.product=res.data.data.product;
						this.isSiMu=this.product.isSiMu;
						this.videoUrl=res.data.data.videoUrl;
						this.productBeiAnUrl=res.data.data.productBeiAnUrl;
						this.productTagList=res.data.data.productTagList;
						this.viewCount=res.data.data.viewCount;
						this.productPingLunList=res.data.data.productPingLunList;
						if(this.productPingLunList.length==5){
							this.showMoreDiv=true;
						}
						console.log("loginRole========"+this.videoUrl);
						if(this.loginRole==3){
							this.isRenzheng=true;
						}
						
				
					},
					fail: (res) => {
						console.log("..............................................fail");
						console.log(JSON.stringify(res));
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
			})},
			getMoreList: function() {
				console.log("getMoreList================="+this.loadingType)
				//本次加载没有完成，禁止继续下拉
				if (this.loadingType !== 0) {
					return;
				}
				//设置状态为加载中。。。
				this.loadingType = 1;
				page++;
				uni.showNavigationBarLoading();
				uni.request({
					url: _self.loadMoreUrl,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					data: {
						pageNow: page,
						token: this.token,
						projId: this.projId
					},
					success: function(res) {
						console.info("第"+page+"数据为"+JSON.stringify(res));
						console.log("第" + page + '页共加载' + res.data.data.productPingLunList.length + "条数据")
						//没有更多数据了,2种情况会存在没有更多数据，1是最后一页数据不足每页显示的条数，2是最后一页刚好没数据
						if (res.data.data.productPingLunList.length == 0) {
							_self.loadingType = 2;
							_self.showMoreDiv=false;
							return;
						}
						//将本次获取到的数据追加到列表中
						_self.productPingLunList = _self.productPingLunList.concat(res.data.data.productPingLunList);
			
						if (res.data.data.productPingLunList.length != 5) {
							_self.loadingType = 2;
							return;
						}
						//设置状态，可以继续下拉加载更多
						_self.loadingType = 0;
			
					},
					complete: function(res) {
						uni.hideNavigationBarLoading();
			
					}
				});
			
			
			},
			toBenAnPage(){
				uni.navigateTo({
					url: './productBenAn?productBeiAnUrl='+this.productBeiAnUrl,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toProductDetail() {
				if(this.isSiMu!=0 || this.isRenzheng){
					uni.navigateTo({
						url: './productDetail/productDetail?projId='+this.projId+"&yield="+this.yield,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else {
					uni.showModal({
						content: '是否去实名认证？',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './productDetail/simuYuyue/shimingrenzheng/shimingrenzheng',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					/* uni.showModal({
						content: '是否去实名认证？',
					}) */
				}

			},
			toWodelicaishi() {
				// var proName = this.productDetai.productName
				uni.navigateTo({
					url: './productDetail/simuYuyue/yuyue/yuyue',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toPinglun() {
				uni.navigateTo({
					url: './pinglun/pinglun?proj_id='+this.projId+'&isNotRealName='+'n'+'&productName='+this.product.productName,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	page {
		background: white;
	}
	
	.topBox {

		width: 100%;
	
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/biejing.png") top center no-repeat;
		background-size: 100% 370upx;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 67upx 30upx 0 37upx;
		color: rgb(255, 255, 255);
	}

	.middle {
		font-size: 18px;
	}

	.second-title {
		font-size: 12px;
		text-align: center;
		color: rgb(255, 255, 255);
		margin-bottom: 14upx;
	}

	.go-back {
		font-size: 17px;
	}

	.share {
		font-size: 20px;
	}

	.videoBox {
		padding: 0 30upx;

	}

	.videoBox .video {

		width: 100%;
		height: 388upx;
		/*height: 350upx;*/
		border-radius: 5px;
	}

	.product-item {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin-top: 20upx;
		text-align: left;
	}

	.product-title {

		text-align: left;


		padding: 30upx 0;

	}

	.product-title .title {
		border-left: 4px solid rgba(203, 147, 89, 1);
		padding-left: 17upx;

	}

	.product-detail {
		padding: 20upx 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		border-top: 1px solid rgba(238, 238, 238, 1);
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.product-detail .item-top {
		line-height: 66upx;
	}

	.product-detail .item-bottom {
		line-height: 50upx;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.color {
		color: rgba(196, 156, 90, 1);

	}

	.size {
		font-size: 16px;
	}

	.large-size {
		font-size: 24px;
	}

	.button-group {

		height: 90upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.button-group view {
		margin-left: 22upx;
		line-height: 50upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		color: #fff;
		padding: 0 32upx;
		border-radius: 20px;

	}

	.contentBox {

		padding: 0 30upx 110upx;
		
	}

	.contentTop {
		padding: 30upx 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}



	.bot {
		display: flex;
		flex-direction: row;
		font-size: 11px;
		line-height: 48upx;
		justify-content: space-between;
		color: rgba(153, 153, 153, 1);
		font-weight: 500;
	}

	.left,
	.right {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.left .from {
		margin-right: 10upx;
	}

	.right {
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		font-weight: 500;

	}

	.uni-font17 {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		font-size: 17px;

	}

	.contentMid {
		padding: 0 0 30upx 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.videoDetail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-left: 4px solid rgba(203, 147, 89, 1);
		padding-left: 17upx;
		margin: 31upx 0 27upx 0;

	}

	.mark,
	.mark-top-left,
	.mark-right .mark-top {
		display: flex;
		flex-direction: row;

	}
	.mark-right{
		width: 100%!important;
	}
	.mark {
		margin-top: 29upx;
		padding-bottom: 37upx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.mark-top-left,
	.mark-right .mark-top {
		align-items: center;
		justify-content: space-between;
	}

	.mark-top-left {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 44upx;
		font-size: 16px;
	}

	.avator-left,
	.avator-left image {
		height: 80upx;
		width: 80upx;
		border-radius: 50%;

	}

	.mark-right {
		margin-left: 19upx;
	}

	.position {
		margin-right: 10upx;
	}

	.mark-bot {

		font-size: 14px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 42upx;
		margin-top: 14upx;
		max-width: 564upx;
		word-wrap: break-word;
		word-break: normal;
	}

	.mark-right .time {
		font-size: 12px;

		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.more-mark {
		text-align: center;
		font-weight: 500;
		color: rgba(196, 156, 90, 1);
		line-height: 82upx;
	}

	label {
		margin-right: 10upx;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.bottom-tab {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		background: rgb(255, 255, 255);
	}

	.bottom-item {}

	.bottom-icon-image {
		margin-top: 15upx;
		height: 40upx;
		width: 40upx;
	}

	.bottom-text {
		color: rgba(153, 153, 153, 1);
		line-height: 40upx;
		font-size: 9px;
	}

	.label {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.label .label-item {
		height: 60upx;
		background: rgba(245, 245, 245, 1);
		border-radius: 15px;
		line-height: 60upx;
		padding: 0 32upx;
		margin: 0 10upx 10upx 0;
		font-size: 12px;
	}

	.star {
		display: flex;
		flex-direction: row;
	}

	.star-image-select {
		width: 15px;
		height: 14px;
		margin-right: 10upx;
	}

	.mark-images {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.mark-image {
		height: 160upx;
		width: 160upx;
		margin-right: 10upx;
	}
</style>
